<template>
  <div>
    <el-main :style="{ '--zoom': zoom }">
      <el-row>
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link fw_title">
            {{ value }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="1">待走访</el-dropdown-item>
            <el-dropdown-item command="3">已走访</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-col class="fw_form">
          <el-row :gutter="20">
            <el-col :span="2" class="form_add">
              <el-button type="primary" round @click="handleClick()">新增 +</el-button>
            </el-col>
            <el-col :span="3">
              <el-select
                v-model="demand"
                placeholder="需求标签"
                @change="demandSearch"
                clearable
              >
                <el-option
                  v-for="item in demandLiat"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="3">
              <el-select
                v-model="enterprise"
                placeholder="企业标签"
                @change="enterpriseSearch"
                clearable
              >
                <el-option
                  v-for="item in enterpriseLiat"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="8" class="form_date">
              <el-col :span="12">
                <el-date-picker
                  v-if="type == 1 || type == 4"
                  type="daterange"
                  range-separator="至"
                  :default-time="['00:00:00', '24:00:00']"
                  value-format="yyyy-MM-dd"
                  start-placeholder="开始走访日期"
                  end-placeholder="结束走访日期"
                  v-model="date.date2"
                  style="width: 100%; border-radius: 20px"
                  @change="time(2)"
                >
                </el-date-picker>
              </el-col>
              <el-col :span="12">
                <el-date-picker
                  v-if="type == 4 || type == 3"
                  type="daterange"
                  value-format="yyyy-MM-dd"
                  :default-time="['00:00:00', '24:00:00']"
                  range-separator="至"
                  start-placeholder="开始解决日期"
                  end-placeholder="结束解决日期"
                  v-model="date.date1"
                  style="width: 100%; border-radius: 20px"
                  @change="time(1)"
                >
                </el-date-picker>
              </el-col>
              <el-col :span="12">
                <el-date-picker
                  v-if="type == 2"
                  type="daterange"
                  value-format="yyyy-MM-dd"
                  :default-time="['00:00:00', '24:00:00']"
                  range-separator="至"
                  start-placeholder="开始待解决日期"
                  end-placeholder="结束待解决日期"
                  v-model="date.date3"
                  style="width: 100%; border-radius: 20px"
                  @change="time(3)"
                >
                </el-date-picker>
              </el-col>
              <el-col :span="12">
                <el-date-picker
                  v-if="type == 5"
                  type="daterange"
                  value-format="yyyy-MM-dd"
                  :default-time="['00:00:00', '24:00:00']"
                  range-separator="至"
                  start-placeholder="开始解决日期"
                  end-placeholder="结束解决日期"
                  v-model="date.date4"
                  style="width: 100%; border-radius: 20px"
                  @change="time(4)"
                >
                </el-date-picker>
              </el-col>
              <el-col :span="12">
                <el-date-picker
                  v-if="type == 6"
                  type="daterange"
                  value-format="yyyy-MM-dd"
                  :disabled="timeShow"
                  :default-time="['00:00:00', '24:00:00']"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  v-model="date.date5"
                  style="width: 100%; border-radius: 20px"
                  @change="time(5)"
                >
                </el-date-picker>
              </el-col>
            </el-col>
            <el-col :span="2" class="form_output">
              <el-button type="primary" round @click="visitExport">导出</el-button>
            </el-col>
            <el-col :span="6">
              <el-input placeholder="关键词搜索" v-model="search" @change="getsearch">
                <i
                  slot="suffix"
                  class="el-input__icon el-icon-search"
                  @click="getsearch"
                ></i>
              </el-input>
            </el-col>
          </el-row>
        </el-col>
        <el-col class="fw_table">
          <el-table
            v-loading="loading"
            @row-click="tableclick"
            :header-cell-style="{ backgroundColor: '#f6f4fc' }"
            :data="tableData"
            :key="type"
            style="width: 100%"
          >
            <el-table-column prop="company_name" label="企业名称" width="250">
            </el-table-column>
            <!-- <el-table-column prop="street_name" label="所属镇街" width="150">
            </el-table-column> -->
            <el-table-column prop="people" label="联系人/联系方式" width="250">
              <template slot-scope="scope">
                <span>{{ scope.row.people }}</span>
                <span>{{ scope.row.phone }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="work_name" label="走访人员" width="150">
              <!-- <template slot-scope="scope">
                <span v-for="(item, index) in scope.row.people" :key="item">{{ item }}<span
                    v-if="index < scope.row.people.length - 1">、</span></span>
              </template> -->
            </el-table-column>
            <!--            <el-table-column prop="date" label="走访时间" width="100">-->
            <!--            </el-table-column>-->
            <el-table-column label="企业标签">
              <template slot-scope="scope">
                <el-tag
                  class="b_bule"
                  size="small"
                  v-for="item in scope.row.label_true_name"
                  :key="scope.row.id + item.name + '企业'"
                >
                  {{ item.name }}
                </el-tag>
                <el-tag
                  class="b_bule"
                  size="small"
                  v-for="item in scope.row.label_name"
                  :key="scope.row.id + item.name + '需求'"
                >
                  {{ item.name }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="demand" label="需求标签">
              <template slot-scope="scope">
                <el-tag
                  class="b_bule b_red"
                  size="small"
                  v-for="item in scope.row.demand_name"
                  :key="scope.row.id + item.name"
                >
                  {{ item.name }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
              v-if="type == 1 || type == 2 || type == 4 || type == 3 || type == 6"
              prop="v_time"
              :label="tableName[type]"
              width="250"
            >
              <template slot-scope="scope">
                <div style='display: flex;justify-content: center;'>
                  <el-tag class="b_bule red" v-if="type == 1 && expire(scope.row.v_time)" size="small"> 逾期 </el-tag>
                  <div v-if="type == 4 || type == 1 || type == 3">
                    {{ scope.row.v_time | formatDate }}
                  </div>
                </div>
                <!-- <div v-if="type == 3"> {{ scope.row.v_time | formatDate }}</div> -->
                <div v-if="type == 2">{{ scope.row.solve_time | formatDate }}</div>
                <div v-if="type == 6">
                  <div>
                    {{ scope.row.status_name }}
                  </div>
                  <div>
                    {{ scope.row.end_time }}
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              v-if="type == 5"
              prop="solve_time"
              label="解决时间"
              width="160"
            >
              <template slot-scope="scope">
                <div v-if="type == 2">
                  <div v-for="item in scope.row.solve_time_arr" :key="item">
                    {{ item | formatDate }}
                  </div>
                  <div v-for="item in scope.row.so_time_arr" :key="item">
                    {{ item | formatDate }}
                  </div>
                </div>
                <div v-if="type == 5">
                  <div v-for="item in scope.row.solve_time_arr" :key="item">
                    {{ item | formatDate }}
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="240">
              <template slot-scope="scope">
                <div style="display: flex; justify-content: center">
                  <div>
                    <el-button
                      @click.stop="goVisit(scope.row)"
                      type="primary"
                      round
                      size="mini"
                      class=""
                    >
                      {{ clickName[type] }}
                    </el-button>
                  </div>
                  <div style="margin-left: 10px">
                    <el-button
                      @click.stop="DeleteBtn(scope.row)"
                      slot="reference"
                      type="danger"
                      round
                      size="mini"
                      >删除</el-button
                    >
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="24" class="fw_page">
          <div class="pagination" style="margin-top: 30px">
            <el-pagination
              background
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-size="limit"
              layout="total, prev, pager, next, jumper"
              :total="Number(count)"
              align="left"
            ></el-pagination>
          </div>
        </el-col>
      </el-row>
    </el-main>

    <el-dialog title="是否删除此条记录" :visible.sync="dialogVisible" width="20%" center>
      <span class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="Delete">确 定</el-button>
      </span>
    </el-dialog>

    <WaitvisitDialog
      :addVisit="addVisit"
      :add_form="add_form"
      @close="close"
      @preservation="preservation"
    >
    </WaitvisitDialog>
  </div>
</template>

<script>
import {
  visitList,
  deamdLabel,
  companyLabelIndex,
  visitDel,
  visit_export,
} from "@/api/newuser";
import WaitvisitDialog from "./components/WaitvisitDialog.vue";
import { VUE_APP_BASE_API } from "@/config";
export default {
  data() {
    return {
      dialogVisible: false,
      deleteId: "",
      loading: true,
      zoom: 1,
      clickName: {
        1: "马上走访",
        2: "马上解决",
        3: "马上跟进",
        4: "查看",
        5: "查看",
        6: "查看",
      },
      tableName: {
        1: "期望走访时间",
        2: "待解决时间",
        3: "走访时间",
        4: "状态/时间",
        5: "查看",
        6: "状态/时间",
      },
      type: this.$route.query.type,
      user_id: this.$store.state.user.id,
      addVisit: false,
      search: "",
      demand: "",
      demandLiat: [],
      enterprise: "",
      add_form: {
        name: "",
        time: "",
        Visitpeople: "",
        enterprise: [],
      },
      enterpriseLiat: [],
      date: {
        date1: [],
        date2: [],
        date3: [],
        date4: [],
        date5: [],
      },
      tableData: [],
      page: 1,
      limit: 10,
      count: 0,
      value: "",
      todayDate: "",
      timeShow: false,
    };
  },
  //过滤器
  filters: {
    //日期格式化
    formatDate: function (value) {
      if (value) {
        return value.substring(0, 16);
      }
    },
  },
  components: { WaitvisitDialog },
  mounted() {
    let width = document.documentElement.clientWidth || document.body.clientWidth;
    this.zoom = width / 1920;
    if (this.type == 1) {
      this.value = "待走访";
    } else if (this.type == 2) {
      this.value = "待解决";
    } else if (this.type == 3) {
      this.value = "已走访";
    } else if (this.type == 4) {
      this.value = "全部记录";
    } else if (this.type == 5) {
      this.value = "已解决";
    } else if (this.type == 6) {
      this.value = "全部记录";
    }
    this.getdeamdLabel();
    this.companyLabelIndex();
    if (this.$route.query.time) {
      this.timeShow = true;
      //this.$route.query.time转换成时间戳
      let time = new Date(this.$route.query.time + " 00:00:00") * 1 + 86400000;
      //将time时间戳转换成时间
      let datetime = new Date(time);
      let Y = datetime.getFullYear();
      let M = datetime.getMonth() + 1;
      let D = datetime.getDate();
      let date2 = Y + "-" + M + "-" + D;
      this.date.date5 = [this.$route.query.time, date2];
      // console.log(this.date.date5, 'this.date.date5');
      // this.date.date5.push(this.$route.query.time)
      // this.date.date5.push(date2)
      // console.log(this.date.date5, 'this.date.date5');
      let date = this.date.date5;
      this.date.date5 = date[0] + "至" + date[0];
    }
    if (this.$route.query.timeRange) {
      //获取上个月的时间yyyy-MM-dd
      // let date = new Date()
      // let year = date.getFullYear()
      // let month = date.getMonth()
      // let firstDay = new Date(year, month, 1)
      // firstDay = firstDay.getFullYear() + '-' + (firstDay.getMonth() + 1) + '-' + firstDay.getDate()
      // console.log(firstDay, 'firstDay');
      // this.date.date2 = [firstDay, firstDay]
      //获取上一个月的范围月初到月底的范围使用
      let date1 = new Date();
      let year1 = date1.getFullYear();
      let month1 = date1.getMonth();
      let firstDay1;
      let lastDay1;
      if (this.$route.query.timeRange == 1) {
        //上月
        firstDay1 = new Date(year1, month1 - 1, 1);
        lastDay1 = new Date(year1, month1, 0);
      } else {
        // 本月
        firstDay1 = new Date(year1, month1, 1);
        lastDay1 = new Date(year1, month1 + 1, 0);
      }
      let yeardemo1 =
        firstDay1.getMonth() + 1 > 9
          ? firstDay1.getMonth() + 1
          : "0" + (firstDay1.getMonth() + 1);
      let yeardemo2 =
        lastDay1.getMonth() + 1 > 9
          ? lastDay1.getMonth() + 1
          : "0" + (lastDay1.getMonth() + 1);
      let firstDayData1 =
        firstDay1.getDate() > 9 ? firstDay1.getDate() : "0" + firstDay1.getDate();
      let lastDayData1 =
        lastDay1.getDate() > 9 ? lastDay1.getDate() : "0" + lastDay1.getDate();
      firstDay1 = firstDay1.getFullYear() + "-" + yeardemo1 + "-" + firstDayData1;
      lastDay1 = lastDay1.getFullYear() + "-" + yeardemo2 + "-" + lastDayData1;
      if (this.$route.query.type == 4) {
        this.date.date2 = firstDay1 + "至" + lastDay1;
      } else if (this.$route.query.type == 5) {
        this.date.date4 = firstDay1 + "至" + lastDay1;
      } else if (this.$route.query.type == 2) {
        this.date.date3 = firstDay1 + "至" + lastDay1;
      } else if (this.$route.query.type == 3) {
        this.date.date1 = firstDay1 + "至" + lastDay1;
      }
    }

    this.visitList();
  },
  created() {
    //获取今天日期时间戳
    let date = new Date();
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let day = date.getDate();
    //this.todayDate转时间戳
    this.todayDate = new Date(year + "-" + month + "-" + day + " 00:00:00").getTime();
    console.log(this.todayDate, "this.todayDate");
  },
  //监听
  watch: {
    type(val) {
      if (val == 1) {
        this.value = "待走访";
      } else if (val == 2) {
        this.value = "待解决";
      } else if (val == 3) {
        this.value = "已走访";
      } else if (val == 4) {
        this.value = "全部记录"; // 2/8 暂时隐藏不需要了
      } else if (val == 5) {
        this.value = "已解决";
      } else if (val == 6) {
        this.value = "全部记录";
      }
      this.visitList();
    },
  },
  methods: {
    expire(time) {
      let date = new Date(time).getTime();
      console.log(date, "asdasdads");
      if (date < this.todayDate) {
        return true;
      } else {
        return false;
      }
    },
    visitExport() {
      // visit_export(
      //   {
      //     user_id: this.user_id,
      //     type: this.type,
      //     page: this.page,
      //     limit: this.limit,
      //     company_label: this.enterprise,
      //     demand_label: this.demand,
      //     visit_time: this.date.date1,
      //     v_time: this.date.date2,
      //     name: this.search
      //   }
      // ).then(res => {
      //   // console.log(res);
      //   const blob = new Blob([res.data]);
      //   const fileName = "走访记录信息导出.xls";
      //   const elink = document.createElement("a");
      //   elink.download = fileName;
      //   elink.style.display = "none";
      //   elink.href = URL.createObjectURL(blob);
      //   document.body.appendChild(elink);
      //   elink.click();
      //   URL.revokeObjectURL(elink.href); // 释放URL 对象
      //   document.body.removeChild(elink);
      // })
      window.open(
        `${VUE_APP_BASE_API}/v1/company/visit_export?user_id=${this.user_id}&type=${this.type}&page=${this.page}&limit=${this.limit}&company_label=${this.enterprise}&demand_label=${this.demand}&visit_time=${this.date.date1}&v_time=${this.date.date2}&name=${this.search}`
      );
    },
    time(type) {
      if (type == 1) {
        // console.log(this.date.date1);
        if (this.date.date1) {
          let date = this.date.date1;
          this.date.date1 = date[0] + "至" + date[1];
        }
      } else if (type == 2) {
        // console.log(this.date.date2);
        if (this.date.date2) {
          let date = this.date.date2;
          this.date.date2 = date[0] + "至" + date[1];
        }
      } else if (type == 3) {
        // console.log(this.date.date3);
        if (this.date.date3) {
          let date = this.date.date3;
          this.date.date3 = date[0] + "至" + date[1];
        }
      } else if (type == 4) {
        // console.log(this.date.date4);
        if (this.date.date4) {
          let date = this.date.date4;
          this.date.date4 = date[0] + "至" + date[1];
        }
      } else if (type == 4) {
        // console.log(this.date.date4);
        if (this.date.date4) {
          let date = this.date.date4;
          this.date.date4 = date[0] + "至" + date[1];
        }
      } else if (type == 5) {
        // console.log(this.date.date5);
        if (this.date.date5) {
          let date = this.date.date5;
          this.date.date5 = date[0] + "至" + date[1];
          // console.log(this.date.date5);
        }
      }
      this.visitList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.visitList();
    },
    getsearch(value) {
      this.visitList();
    },
    demandSearch(demand) {
      this.visitList();
    },
    enterpriseSearch(enterprise) {
      this.visitList();
    },
    companyLabelIndex() {
      companyLabelIndex().then((res) => {
        this.enterpriseLiat = res;
      });
    },
    getdeamdLabel() {
      deamdLabel().then((res) => {
        this.demandLiat = res;
      });
    },
    handleCommand(command) {
      this.type = command;
      this.demand = "";
      this.enterprise = "";
      this.date = {
        date1: "",
        date2: "",
      };
      this.page = 1;
      this.$router.replace({
        path: "/workWaitvisit2",
        query: {
          type: Number(command),
        },
      });
    },
    visitList() {
      this.loading = true;
      visitList({
        user_id: this.user_id,
        type: this.type,
        page: this.page,
        limit: this.limit,
        company_label: this.enterprise,
        demand_label: this.demand,
        visit_time: this.date.date1,
        v_time: this.date.date2,
        name: this.search,
        solve_time: this.date.date3,
        so_time: this.date.date4,
        end_time: this.date.date5,
      }).then((res) => {
        this.loading = false;
        this.tableData = res.list;
        this.count = res.count;
      });
    },
    handleClick(row) {
      this.$router.push("/addWaitvisit");
    },
    tableclick(row, column, event) {
      this.$router.push({
        path: "/workEnterprisevisit",
        query: {
          id: row.id,
        },
      });
    },
    close() {
      this.addVisit = false;
      this.empty();
    },
    preservation() {
      this.addVisit = false;
      this.empty();
    },
    empty() {
      this.add_form = {
        name: "",
        time: "",
        Visitpeople: "",
        enterprise: [],
      };
    },
    goVisit(row) {
      this.$router.push({
        path: "/workVisit",
        query: {
          id: row.id,
        },
      });
    },
    cancel() {
      this.deleteId = "";
      this.dialogVisible = false;
    },
    Delete() {
      visitDel({ id: this.deleteId }).then((res) => {
        this.$message({
          message: "删除成功",
          type: "success",
        });
        if (this.tableData.length == 1) {
          this.page = this.page - 1;
        }
        this.visitList();
        this.deleteId = "";
        this.dialogVisible = false;
      });
    },
    DeleteBtn(row) {
      this.deleteId = row.id;
      this.dialogVisible = true;
    },
  },
};
</script>

<style scoped lang="less">
.el-main {
  zoom: var(--zoom);
}
.red {
  background-color: #ff5f58 !important;
  color: #fff !important;
}
.b_bule {
  background-color: #d3e2ff;
  margin: 3px 5px;
  border-radius: 5px;
  color: #4585ff;
  font-size: 14px;
  height: 20px;
  line-height: 20px;
  border: 0;
}

.b_red {
  color: #ff5f58;
  background-color: #fff6f5;
}

.b_red2 {
  color: #ffffff;
  background-color: #ff5f58;
}

.button_from_i {
  min-width: 125px;
  height: 38px;
  line-height: 0px;
  font-size: 14px;
  color: #3377ff;
  background-color: #ebf2ff;
  border: 1px solid #387dff;
}

.dialog-footer {
  display: flex;
  justify-content: center;
  // button {
  //   padding: 5px 30px;
  //   width: 139px;
  //   height: 38px;
  //   background: #387DFF;
  //   border: 1px solid #E8ECEF;
  //   border-radius: 19px;
  //   font-size: 14px;
  // }
}

::v-deep .el-table__row td:nth-child(6) .el-button {
  // color: #23B899;
  // background-color: #ecfaf7;
  // border: none;
  // font-size: 14px;
}

::v-deep input {
  border-radius: 38px;
  height: 38px;
  line-height: 38px;
}

.item_list_tag {
  color: #fff6f5 !important;
  background-color: #ff5f58 !important;
  padding: 0 5px !important;
}

::v-deep .el-input__icon {
  // line-height: 38px;
  // font-size: 16px;
}

::v-deep .has-gutter tr th:nth-child(2),
::v-deep .has-gutter tr th:nth-child(3),
// ::v-deep .has-gutter tr th:nth-child(5),
::v-deep .has-gutter tr th:nth-child(6),
::v-deep .has-gutter tr th:nth-child(7),
::v-deep .has-gutter tr th:nth-child(8),
::v-deep tbody tr td:nth-child(2),
::v-deep tbody tr td:nth-child(3),
// ::v-deep tbody tr td:nth-child(5),
::v-deep tbody tr td:nth-child(7),
::v-deep tbody tr td:nth-child(6) {
  text-align: center;
}

::v-deep .has-gutter tr th {
  font-size: 14px;
  font-weight: initial;
  color: #334681;
}

.Visitdate {
  margin-top: 62px;
}

::v-deep tbody tr td {
  font-size: 14px;
  color: #334681;
}

::v-deep .el-table__row td:nth-child(7) .el-button {
  // color: #23B899;
  // background-color: #ecfaf7;
  // border: none;
}

.el-main {
  margin-right: 15px;
  border-radius: 5px;
  margin: 25px 30px 0 30px;
}

.fw_title {
  font-weight: bolder;
  font-size: 24px;
}

.line {
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #ebeaed;
}

.fw_form {
  margin-top: 15px;

  .form_add {
    .el-button {
      height: 38px;
      line-height: 5px;
      background-color: #ebf2fd;
      color: #3377ff;
      font-size: 16px;
      border: 1px solid #387dff;
    }

    // .el-button:hover {
    //   background-color: #ebf2fd;
    //   border: 1px solid #387DFF;
    //   color: #3377FF;
    // }
  }

  .form_output {
    .el-button {
      padding: 0px 35px;
      font-size: 16px;
      height: 38px;
      line-height: 5px;
      background-color: #387dff;
    }
  }

  .form_date {
    div {
      // padding-right: 0 !important;
      // padding-left: 0 !important;
    }
  }
}

.fw_table {
  margin-top: 15px;

  .item_list {
    display: inline-block;
    background-color: #d3e2ff;
    margin: 3px 5px;
    border-radius: 5px;
    padding: 0px 5px;
    color: #387dff;
  }

  .item_demand {
    color: #ff5f58;
    background-color: #fff6f5;
  }
}

::v-deep .el-dialog {
  border-radius: 10px;
  margin-top: 22vh !important;
}

::v-deep .el-dialog__header {
  .el-dialog__title {
    font-size: 22px;
    font-weight: bolder;
  }

  .el-dialog__headerbtn {
    i {
      position: absolute;
      border: 3px solid #fff;
      top: -50px;
      left: 30px;
      color: #fff;
      border-radius: 30px;
      font-size: 24px;
      font-weight: bolder;
    }
  }
}

::v-deep .el-form-item {
  .el-form-item__label {
    font-size: 14px;
    font-weight: initial;
  }

  .el-form-item__content {
    .el-input__inner {
      border-radius: 5px;
    }
  }
}

@media (max-width: 1360px) {
}

@media (max-width: 1280px) {
}
</style>
